<template>
	<!-- 首页 -->
	<view class="content">
		<view class="top-nav">
			<view class="top-head flex-row align-center justify-between">
				<view class="search align-center">
					<u-icon name="map-fill" color="#FFFFFF"></u-icon>
					<text>安徽省合肥市蜀山区蔚蓝商务港</text>
				</view>
			</view>
			<view class="weather">
				<view style="font-size: 2.4rem;font-weight: bold;">早上好！</view>
			</view>
		</view>
		<!-- banner 四个图标 -->
		<view class="main-content">
			<view class="nav-module">
				<view class="nav-content flex-row">
					<view class="nav-item flex-col align-center" @click="toMoisture">
						<image class="label2" referrerpolicy="no-referrer" src="/static/index/moisture.png" />
						<text class="word2">墒情预警</text>
					</view>
					<view class="nav-item flex-col align-center" @click="toWater">
						<image class="label2" referrerpolicy="no-referrer" src="/static/index/water.png" />
						<text class="word2">水质监测</text>
					</view>
					<view class="nav-item flex-col align-center" @click="toProduct">
						<image class="label2" referrerpolicy="no-referrer" src="/static/index/produce.png" />
						<text class="word2">生产管理</text>
					</view>
					<view class="nav-item flex-col align-center" @click="toknowledge">
						<image class="label2" referrerpolicy="no-referrer" src="/static/index/knowledge.png" />
						<text class="word2">知识百科</text>
					</view>
				</view>
				<view class="notice-scroll justify-between align-center" @click="toServices">
					<view class="flex-row align-center">
						<image class="notice-icon" referrerpolicy="no-referrer" src="/static/index/horn.png" />
						<view class="label-type">社会化服务</view>
						<u-notice-bar class="label-text" icon="" :text="noticeList" direction="column" color="#333333"
							fontSize="1.1rem"></u-notice-bar>
					</view>
				</view>
				<!-- 虫情百科 -->
				<view class="ency">
					<view class="top" @click="toknowledge">
						<view class="left">
							<image class="left-icon" referrerpolicy="no-referrer" src="/static/index/leftTI.png" alt="">
								虫情百科
						</view>
						<view class="right">
							<image class="right-icon" referrerpolicy="no-referrer" src="/static/index/rightJT.png"
								alt="">
						</view>
					</view>
					<view class="main">
						<scroll-view class="scroll-view" :scroll-x="true">
							<view v-for="item in ency" :key="item.id"
								:style="{'background': 'url('+item.diseaseImgList.split(',')[0]+') no-repeat center','background-size':'cover'}"
								class="scroll-item" @click="toDamageDetail(item.id)">
								<view class="text">
									<view class="text1">
										{{item.diseaseName}}
									</view>
									<view class="text2">
										{{item.diseaseIntro}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<!-- 病害百科 -->
				<view class="ency">
					<view class="top">
						<view class="left" @click="toknowledge">
							<image class="left-icon" referrerpolicy="no-referrer" src="/static/index/leftTI.png" alt="">
								病害百科
						</view>
						<view class="right">
							<image class="right-icon" referrerpolicy="no-referrer" src="/static/index/rightJT.png"
								alt="">
						</view>
					</view>
					<view class="main">
						<scroll-view class="scroll-view" :scroll-x="true">
							<view v-for="item in disease" :key="item.id"
								:style="{background: 'url('+item.diseaseImgList.split(',')[0]+') no-repeat center','background-size':'cover'}"
								class="scroll-item" @click="toDamageDetail(item.id)">
								<view class="text">
									<view class="text1">
										{{item.diseaseName}}
									</view>
									<view class="text2">
										{{item.diseaseIntro}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>
<script>
import {getPestsList} from '@/api/index/index'
import {getServicesList} from '@/api/index/services.js'

export default {
		data() {
			return {
				noticeList: [],
				ency: [],
				disease: []
			};
		},
		onLoad() {
			this.getPestsListFn();
			this.getServicesListFn();
		},
		methods: {
			// 获取病虫害知识列表
			async getPestsListFn() {
				let res = await getPestsList({
					pageNo: 1,
					pageSize: 6,
					diseaseType: 1
				});
				res.list.forEach((item) => {
					if (!item.diseaseImgList) {
						item.diseaseImgList = '/static/index/default2.png'
					}
				})
				this.ency = res.list;

				let res1 = await getPestsList({
					pageNo: 1,
					pageSize: 6,
					diseaseType: 2
				});
				res1.list.forEach((item) => {
					if (!item.diseaseImgList) {
						item.diseaseImgList = '/static/index/default.png'
					}
				})
				this.disease = res1.list;
			},
			// 获取社会化服务列表
			async getServicesListFn() {
				let res = (await getServicesList({
					pageNo: 1,
					pageSize: 3
				})).list
				this.noticeList = res.map(item => {
					return item.employName
				})
			},
			// 跳转墒情预警
			toMoisture() {
				uni.navigateTo({
					url: "/subPages/index/moisture/index"
				})
			},
			// 跳转知识百科
			toknowledge() {
				uni.navigateTo({
					url: '/subPages/index/knowledge/index'
				})
			},
			// 跳转生产管理
			toProduct() {
				uni.navigateTo({
					url: '/subPages/index/product/index'
				})
			},
			// 跳转水质检测
			toWater() {
				uni.navigateTo({
					url: '/subPages/index/water/index'
				})
			},
			// 跳转病虫害详情页
			toDamageDetail(id) {
				uni.navigateTo({
					url: '/subPages/index/damageDetail/index?id=' + id
				})
			},
			// 公告栏 跳转社会化服务
			toServices() {
				uni.navigateTo({
					url: '/subPages/index/services/index'
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		.top-nav {
			padding: 5.7rem 2rem 2.5rem 2rem;
			width: 100%;
			height: 28rem;
			background: url("/static/index/background.png") no-repeat center;
			background-size: cover;

			.img1 {
				width: 35.5rem;
				height: 1.25rem;
			}

			.top-head {
				width: 100%;
				color: #FFFFFF;

				.change-city {
					height: 1.3rem;
					overflow-wrap: break-word;
					color: rgba(18, 28, 50, 1);
					font-size: 1.4rem;
					white-space: nowrap;
					line-height: 1.4rem;

					.label1 {
						width: 1.15rem;
						height: .6rem;
						margin-left: .95rem;
					}
				}

				.search {
					width: 24.3rem;
					height: 2.8rem;
					font-size: 1.2rem;
				}

				.msg-icon {
					width: 1.7502rem;
					height: 1.6502rem;
				}
			}

			.weather {
				color: #FFFFFF;
				margin-top: 3.5rem;
			}

		}

		.main-content {
			margin-top: -10rem;

			.nav-module {
				background-color: #FFFFFF;
				border-radius: 2rem 2rem 0rem 0rem;

				.nav-content {
					flex-wrap: wrap;

					.nav-item {
						width: 25%;
						font-size: 1.2rem;
						color: #333333;
						margin-top: 2rem;

						image {
							width: 3.4rem;
							height: 3.4rem;
							margin-bottom: .2rem;
						}

						.word2 {
							line-height: 1.7rem;
						}
					}
				}

				.notice-scroll {
					border-radius: .3rem;
					margin: .85rem 1.1rem 0;
					height: 3.7rem;
					padding: 1rem;
					background-color: rgba(119, 172, 97, 0.1);

					.notice-icon {
						width: 1.8rem;
						height: 1.8rem;
					}

					.label-type {
						margin-left: .7rem;
						overflow-wrap: break-word;
						color: #333;
						font-size: 1.2rem;
						text-align: left;
						white-space: nowrap;
					}

					.label-text {
						width: 25rem;
						overflow-wrap: break-word;
						white-space: nowrap;
						margin-left: 1.5rem;
						padding: 0;
						background-color: transparent !important;

						/deep/ .u-notice__swiper {
							height: 3rem;
						}

						/deep/ .u-notice__swiper__item__text span {
							display: block;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.more {
						width: .75rem;
						height: 1rem;
					}
				}

				// 病害百科
				.ency {
					padding: 1rem;

					.top {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 1.6rem;

						.left {
							display: flex;
							align-items: center;
							color: #333;

							.left-icon {
								width: .5rem;
								height: 1.5rem;
								margin-right: .5rem;
							}
						}

						.right {
							.right-icon {
								width: 1.2rem;
								height: 1.2rem;
							}
						}
					}

					.main {
						height: 17rem;
						width: 100%;
						// margin: 20rpx 0;

						.scroll-view {
							width: 100%;
							white-space: nowrap;
							margin: 1rem 0;

							.scroll-item {
								width: 13.5rem;
								height: 17rem;
								display: inline-block;
								margin: 0 .5rem;
								position: relative;
								border-radius: .8rem;

								&:first-child {
									margin-left: 0;
								}

								&:last-child {
									margin-right: 0;
								}

								.text {
									width: 100%;
									position: absolute;
									bottom: 0rpx;
									height: 6.5rem;
									background: rgba(51, 51, 51, 0.3);
									display: flex;
									flex-flow: column;
									justify-content: center;
									border-radius: 0 0 .8rem .8rem;

									.text1 {
										width: calc(100% - 1rem);
										font-size: 1.4rem;
										color: #fff;
										margin: 0 auto;
									}

									.text2 {
										padding-top: .25rem;
										width: calc(100% - 1rem);
										font-size: 1rem;
										line-height: 1.3rem;
										height: 2.8rem;
										color: #fff;
										word-break: break-all;
										white-space: normal;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										margin: 0 auto;
									}
								}
							}
						}
					}
				}
			}

		}
	}
</style>
